<template>
    <div>
        <div v-if="totalunscoreNum!=0 && havedistributenum != 0" id="UnscoreChart" :style="{width: '1000px', height: '700px'}" ></div>
        <p v-if="havedistributenum == 0">
            还未为终审作品进行分配作者
        </p>
        <p v-if="totalunscoreNum === 0 && havedistributenum!=0" style="font-size: 30px;color:rgb(98, 158, 211)">
            终审已完成
        </p>
        <el-button v-if="totalunscoreNum == 0 && havedistributenum!=0" type="primary" :disabled="havepublishGrade" @click="publishGrades"
            style="width: 50%;">{{button_content}}</el-button>
    </div>
</template>
<script lang="js">

    export default {

        data() {
            return {
                seriesData: [],
                legendData: [],
                havedistributenum:NaN,
                button_content: "发布成绩",
                havepublishGrade: false,
                totalunscoreNum: NaN,
            };
        },
        methods: {
            startAutoRefresh() {
                // 每隔5秒刷新一次数据
                this.refreshInterval = setInterval(() => {
                    this.draw();
                }, 10000);
            },
            stopAutoRefresh() {
                clearInterval(this.refreshInterval); // 清除定时器
            },

            async draw() {
                var myChart = this.$echarts.init(document.getElementById('UnscoreChart'));
                // prettier-ignore

                myChart.setOption({
                    title: {
                        text: '未终审作品统计',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        type: 'scroll',
                        orient: 'vertical',
                        right: 10,
                        top: 20,
                        bottom: 20,
                    },
                    series: [
                        {
                            name: '姓名',
                            type: 'pie',
                            radius: '55%',
                            center: ['40%', '50%'],
                            data: [],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                })
                await this.$axios({
                    method: 'post',
                    url: "http://localhost:8080/secondscoring/count",
                }).then(res=>{
                    this.havedistributenum = res.data.data;
                })
                await this.$axios({
                    method: 'post',
                    url: "http://localhost:8080/secondscoring/proUnscoreNum",
                }).then(res => {
                    if (res.data.code == 1) {
                        this.seriesData = res.data.data;
                        const totalValue = this.seriesData.reduce((accumulator, currentValue) => {
                            return accumulator + currentValue.value;
                        }, 0);
                        this.totalunscoreNum = totalValue;
                        console.log(this.totalunscoreNum);
                        console.log(this.seriesData);
                        myChart.setOption({
                            series: [
                                {
                                    name: '姓名',
                                    type: 'pie',
                                    radius: '55%',
                                    center: ['40%', '50%'],
                                    data: this.seriesData,
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        })

                    }

                })

                //防止越界，重绘canvas，解决掉屏幕缩小，图表不会随之适应的缩小的方法
                window.onresize = myChart.resize;
            },
            publishGrades() {
                this.$axios({
                    method: 'post',
                    url: "http://localhost:8080/project/updatepublishfinalscore",
                }).then(res => {
                    if (res.data.data != 0) {
                        this.$message.success("成绩已发布")
                    }
                })
                this.havepublishGrade = true;
                this.button_content = "成绩已发布"
            },
            fetchData() {
                this.$axios({
                    method: 'post',
                    url: "http://localhost:8080/project/havepublishfinalscore",
                }).then(res => {
                    if (res.data.data == 0) {
                        this.havepublishGrade = true;
                        this.button_content = "成绩已发布"
                    }
                })
            }
        },
        async mounted() {
            try {
                await this.draw();
                this.fetchData();
                this.startAutoRefresh();
            } catch (error) {
                console.log('Error During mount:', error)
            }

        },
        beforeDestroy() {
            this.stopAutoRefresh(); // 在组件销毁前停止定时器
        },
    }
</script>